<template>
	<view>
		<text>{{props.title}}</text>
		<view class="flex flex-y-center mt-10 grid-gap-12">
			<view class="flex-1">
				<slider block-size="12" :value="props.modelValue" :min="1" :max="100" :step="1" activeColor="#0073FF"
					block-color="#0073FF" backgroundColor="#D8D8D8" @changing="sliderChange" @change="sliderChange" />
			</view>
			<view class="flex flex-y-center grid-gap-8">
				<text class="iconfont icon-jian " @click="changeIW(1)"></text>
				<view class="round-4 fs-12 bg-white w-40 text-center text-black py-2">{{ props.modelValue / 100 }}
				</view>
				<text class="iconfont icon-jia" @click="changeIW(2)"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['update:modelValue'])
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 1
		},
		title: {
			type: String,
			default: '艺术度（推荐0.3~0.5兼顾艺术和扫码率）'
		}
	})
	const changeIW = (e) => {
		let num = 0;
		if (e == 1 && props.modelValue - 1 > 0) {
			num = props.modelValue - 1

		}
		if (e == 2 && props.modelValue + 1 < 101) {
			num = props.modelValue + 1
		}
		emit('update:modelValue', num)
	}
	const sliderChange = (e) => {
		props.modelValue = e.detail.value
		emit('update:modelValue', e.detail.value)
	}
</script>

<style lang="scss">
	::v-deep uni-slider {
		margin: 10px 0px;
	}
</style>